/* component/Calendar/index.wxss */

.calendar {
  background-color: #fff;
  .calendar-header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 22rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-icon, .right-icon {
      width: 42rpx;
      height: 42rpx;
    }
  }

  .calendar-body {
    width: 350px;
    margin: 0 auto;
    font-size: 16px;
    height: auto;
    transition: height 1.5s ease;

    .weekday {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-auto-rows: minmax(50px, 50px);

      .weekday-item {
        line-height: 50px;
        text-align: center;
        line-height: auto;
        border-radius: 50%;
        box-sizing: border-box;

      }

      .calendar-cell {
        .weekday-item;
        position: relative;

        .procColor {
          width: 10rpx;
          height: 10rpx;
          background: #ccc;
          border-radius:  50%;
          position: absolute;
          left: 45rpx;
          bottom: 13rpx;
        }
      }

      .cell-selected {
        background-color: rgba(17, 95, 225, 1);
        color: #fff;
      }

      .cell-today {
        .calendar-cell;
        background-color: rgba(17, 95, 225, 0.1);
        color: #115FE1;
      }
    }
  }

  .action-fold {
    text-align: center;
    margin-top: 10rpx;
    image {
      width: 46rpx;
      height: 24rpx
    }
  }
}
